.load3 {

    .loader {
        font-size: @size - (@size/2.3);
        margin: 45px auto;
        text-indent: -9999em;
        width: 11em;
        height: 11em;
        border-radius: 50%;
        background: @foreground;
        background: -moz-linear-gradient(left, fade(@foreground, 100%) 10%, fade(@foreground, 0%) 42%);
        background: -webkit-linear-gradient(left, fade(@foreground, 100%) 10%, fade(@foreground, 0%) 42%);
        background: -o-linear-gradient(left, fade(@foreground, 100%) 10%, fade(@foreground, 0%) 42%);
        background: -ms-linear-gradient(left, fade(@foreground, 100%) 10%, fade(@foreground, 0%) 42%);
        background: linear-gradient(to right, fade(@foreground, 100%) 10%, fade(@foreground, 0%) 42%);
        position: relative;
        -webkit-animation: load3 1.4s infinite linear;
        animation: load3 1.4s infinite linear;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);

        &:before {
            width: 50%;
            height: 50%;
            background: @foreground;
            border-radius: 100% 0 0 0;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
        }

        &:after {
            background: @background;
            width: 68%;
            height: 68%;
            border-radius: 50%;
            content: '';
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

    }

}

@-webkit-keyframes load3 {
    .load3-frames;
}

@keyframes load3 {
    .load3-frames;
}

.load3-frames() {

    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

}
